import React from "react";
import {User} from "views/project-list/search-panel"
import {Table} from 'antd'
import type { ColumnsType, TableProps } from "antd/es/table"
import dayjs from "dayjs";
import {Link} from 'react-router-dom'

export interface Project {
    id:string;
    name:string;
    personId:string;
    pin:boolean;
    organization:string;
    created:number;
}

interface ListProps extends TableProps<Project>{
    users:User[],
}

export const List = ({users, ...props}:ListProps) => {
    const columns: ColumnsType<Project> = [
        {
            title:'名称',
            sorter:(a,b) => a.name.localeCompare(b.name),
            render(value, project) {
                return <Link to={`/projects/${String(project.id)}`}>{project.name}</Link>
            }
        },
        {
            title:'部门',
            dataIndex: 'organization'
        },
        {
            title:'负责人',
            render(value,project) {
                return <span>
                    {users.find((user:User) => user.id === project.personId)?.name}
                </span>
            }
        },
        {
            title: '创建时间',
            render(value, project) {
                return <span>
                    { project.created ? dayjs(project.created).format('YYYY-MM-DD') : '无'}
                </span>
            }
        }
    ]

    return <Table
            pagination={false} 
            columns={columns} 
            {...props}/>
}